<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<title>Genius Bear</title>
	<link rel="stylesheet" type="text/css" href="./styles/main.css">
	<script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript" src="./bower_components/handlebars/handlebars.min.js"></script>
		<script type="text/javascript" src="./scripts/BA_statistic.js"></script>

</head>
<body>
<div class="question-wrapper">
	<header>
		<img src="./images/logo_bear2.png" width="50%">
	</header>
	<main class="question-container">
		
	</main>
</div>
	<script type="text/javascript">
		var questionIndex = 0;
		var questionLength = 0;
		var point = 0;
		var data = [];
		var q = -1;

		function next(index, correct) {
			sessionStorage.answers += 'ABCD'.charAt(index);
			if (index === correct) {
				point += 10;
			}
			if (++questionIndex >= questionLength) {
				window.location.href = './result.html?point=' + point;
			} else {
				update();
			}
		}

		function update() {
			var source = $('#question-template').html();
			var template = Handlebars.compile(source);
			data[questionIndex].seq = parseInt(q) + 2;
			var html = template(data[questionIndex]);
			$('.question-container').html(html);
		}

		function getQuestions() {
			
			var param = window.location.search.substr(1).match(/(^|&)q=([^&]*)(&|$)/);
			if (param) {
				q = param[2];
			}
			if (q === -1) {
				window.location.href = './info.html';
			}
			var url = './data/question_' + q + '.json';
			$.getJSON(url, function (res) {
				if (!res) {
					window.location.href = './info.html';
				}
				data = res.data;
				questionLength = data.length;
				sessionStorage.answers = '';
				update();
			});
		}

		$(function () {
			getQuestions();
		});
	</script>
	<script type="text/javascript" src="./scripts/wx_share.js"></script>

	<script id="question-template" type="text/x-handlebars-template">
		<h5 class="question-seq"><img src="./images/seq{{lv}}.png" alt="{{lv}}" width="30px"> {{title}}</h5>
		<p>{{description}}</p>
		<img src="./data/images/{{image}}" alt="题目描述" width="50%">

		<ul class="answer-list clearfix">	
			{{#if answer.is_image}}
			{{#each answer.content}}
			<li class="answer-listitem-image">
				<a href="javascript:;" onclick="next({{@index}}, {{../answer.correct}})">
					<img src="./images/answer{{../seq}}-{{@index}}.png" alt="选项{{@index}}" width="30px">
					<img src="./data/images/{{this}}" alt="选项图" width="50%">
				</a>
			</li>
			{{/each}}
			{{else}}
		 	{{#each answer.content}}
			<li class="answer-listitem-text">
				<a href="javascript:;" onclick="next({{@index}}, {{../answer.correct}})">
					<img src="./images/answer{{../seq}}-{{@index}}.png" alt="选项{{@index}}" width="30px">					
					<p>{{this}}</p>	
				</a>
			</li>		
			{{/each}}
			{{/if}}	
		</ul>
	</script>
</body>
</html>